import React, { useState } from 'react';
import { Carousel, Modal, Table, Button, Row, Col, InputNumber, message, Input } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { getLottery, addLottery, getLotteryResult } from '../store/index';

import './Header.scss';

export default function Header({ type }) {
    const [visible, setVisible] = useState(false);
    const [lotteryVisible, setLotteryVisible] = useState(false);
    const [addVisible, setAddVisible] = useState(false);

    let luckyResult = getLottery() || [];
    let dataSource = [...luckyResult];

    const columns = [
        {
            title: '奖项名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '中奖人数',
            dataIndex: 'number',
            key: 'number',
        }
    ];

    const [addName, setAddName] = useState('');
    const [addNumber, setAddNumber] = useState(1);
    const addOkHandle = () => {
        if (!addName) {
            message.error('请输入奖项名称');
            return;
        }

        addLottery(addName, addNumber);
        luckyResult = getLottery();
        dataSource = [...luckyResult];
        setAddVisible(false);
    }

    const LotteryResultText = () => {
        if (!type) {
            return '暂未抽取';
        }

        const luckyResult = getLotteryResult(type);
        if (!luckyResult) {
            return 'error: 奖项不存在';
        }

        return `${luckyResult.name} ${luckyResult.result.map(item => `${item.key}号`).join(',')}`;
    };

    return (
        <div className="header">
            <Carousel autoplay dotPosition="top">
                <div className="header__item">
                    <h3>2022年会抽奖活动</h3>
                </div>
                <div className="header__item">
                    抽奖结果: {<LotteryResultText />}
                </div>
            </Carousel>
            <div className="header__result">
                <span className="header__result--item" onClick={() => setVisible(true)}>抽奖结果</span>
                <span className="header__result--item" onClick={() => setLotteryVisible(true)}>奖项设置</span>
            </div>
            <Modal title="抽奖结果" visible={visible} onCancel={() => setVisible(false)} onOk={() => setVisible(false)}>
                <ul className="lottery__result">
                    {luckyResult.map((item, index) => {
                        return (<li key={index}>
                            <span className="name">{item.name}</span>
                            <span className="value">
                                {
                                    item.result.length > 0 ?
                                    item.result.map((lotteryCode, key) => {
                                        return <span className="card" key={key}>{ lotteryCode.name || lotteryCode.key }</span>
                                    }) :
                                    <span className="card">暂未抽取</span>
                                }
                            </span>
                        </li>)
                    })}
                </ul>
            </Modal>
            <Modal title="奖项设置" visible={lotteryVisible} onCancel={() => setLotteryVisible(false)} okText="保存奖项" onOk={() => setLotteryVisible(false)}>
                <Button type="primary" icon={<PlusOutlined />} onClick={() => setAddVisible(true)}>新增</Button>
                <Table style={{
                    marginTop: '20px'
                }} dataSource={dataSource} columns={columns} />
            </Modal>
            <Modal title="新增奖项" visible={addVisible} onCancel={() => setAddVisible(false)} onOk={addOkHandle}>
                <Row className="list">
                    <Col span={4} className="list--label">
                        奖项名称:
                    </Col>
                    <Col span={18}>
                        <Input onChange={obj => setAddName(obj.currentTarget.value)} value={addName} />
                    </Col>
                </Row>
                <Row className="list">
                    <Col span={4} className="list--label">
                        中奖数量:
                    </Col>
                    <Col span={18}>
                        <InputNumber min={1} max={999} onChange={setAddNumber} value={addNumber} />
                    </Col>
                </Row>
            </Modal>
        </div>
    )
}